<template>
  <div>
    <div v-for="(item, index) in commentChild" :key="index">
      <div class="comment_item">
        <div class="user_img">
            <img v-if="item.userinfo && item.userinfo.user_img" :src="item.userinfo.user_img" alt="">
            <img v-else src="@/assets/noface.jpg" alt="">
        </div>
        <div class="comment_content">
            <p>
                <span v-if="item.userinfo">{{item.userinfo.name}}</span>
                <span v-else>此用户无姓名</span>
                <span>{{item.comment_date}}</span>
            </p>
        </div>
      </div>
      <div class="reply_wrap">
        <div v-if="temp">回复<span style="color: #478ef0">{{item.parent_user_info.name}}</span>: {{item.comment_content}} <span class="reply" @click="replyItem(item.comment_id)">回复</span></div>
        <div v-else>{{item.comment_content}} <span class="reply" @click="replyItem(item.comment_id)">回复</span></div>
      </div>
      <commentchild-item :commentChild="item.child" :temp="true" @publishItem="publishItem"></commentchild-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commentchildItem',
  props: ['commentChild', 'temp'],
  methods: {
    replyItem (id) {
      this.$emit('publishItem', id)
    },
    // 使用递增完成盖楼评论发布
    publishItem (id) {
      this.replyItem(id)
    }
  }
}
</script>

<style lang="less" scoped>
.comment_item {
  border-bottom: none;
}
.reply_wrap {
  position: relative;
  padding-bottom: 10px;
  .reply {
    color: red;
    position: absolute;
    right: 8px;
    }
}
</style>
